`<!--
  -    Copyright (c) 2018-2025, hycloud All rights reserved.
  -
  - Redistribution and use in source and binary forms, with or without
  - modification, are permitted provided that the following conditions are met:
  -
  - Redistributions of source code must retain the above copyright notice,
  - this list of conditions and the following disclaimer.
  - Redistributions in binary form must reproduce the above copyright
  - notice, this list of conditions and the following disclaimer in the
  - documentation and/or other materials provided with the distribution.
  - Neither the name of the pig4cloud.com developer nor the names of its
  - contributors may be used to endorse or promote products derived from
  - this software without specific prior written permission.
  - Author: hycloud
  -->

<template>
  <div class="app-container calendar-list-container category-wrapper">
    <basic-container>
      <div class="filter-container">
        <el-button-group>
          <el-button
            v-if="deptManager_btn_add"
            type="primary"
            icon="plus"
            @click="handlerAdd">添加
          </el-button>
          <el-button
            v-if="deptManager_btn_edit"
            type="primary"
            icon="edit"
            @click="handlerEdit">编辑
          </el-button>
          <el-button
            v-if="deptManager_btn_del"
            type="primary"
            icon="delete"
            @click="handleDelete">删除
          </el-button>
        </el-button-group>
      </div>

      <el-row>
        <el-col
          :span="6"
          style="margin-top:15px;">
          <el-tree
            :data="treeData"
            :props="defaultProps"
            :filter-node-method="filterNode"
            class="filter-tree"
            node-key="id"
            highlight-current
            default-expand-all
            @node-click="getNodeData"/>
        </el-col>
        <el-col
          :span="18"
          style="margin-top:15px;">
          <el-card class="box-card">
            <el-form
              ref="form"
              :label-position="labelPosition"
              :rules="rules"
              :model="form"
              label-width="120px">
              <el-form-item
                label="父级节点"
                prop="parentId">
                <el-input
                  v-model="form.parentId"
                  disabled
                  placeholder="请输入父级节点"/>
              </el-form-item>
              <el-form-item
                v-if="formEdit"
                label="节点编号"
                prop="categoryId">
                <el-input
                  v-model="form.categoryId"
                  :disabled="formEdit"
                  placeholder="节点编号"/>
              </el-form-item>
              <el-form-item
                label="类别名称"
                prop="name">
                <el-input
                  maxlength="48"
                  v-model="form.name"
                  :disabled="formEdit"
                  placeholder="请输入名称"/>
              </el-form-item>
              <el-form-item
                label="使用期限(月)"
                prop="timeLimit">
                <el-input-number
                  :max="100000000"
                  :controls="false"
                  v-model="form.timeLimit"
                  :disabled="formEdit"
                  placeholder="请输入使用期限(月)"/>
              </el-form-item>
              <el-form-item
                label="编码"
                prop="code">
                <el-input
                 maxlength="24"
                  v-model="form.code"
                  :disabled="formEdit"
                  placeholder="请输入编码"/>
              </el-form-item>
              <el-form-item
                label="状态"
                prop="status">
                <el-select v-model="form.status"
                style="width: 100%"
                        placeholder="请选择状态"
                        :disabled="formEdit"
                        clearable>
                    <el-option v-for="item in optionszt"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="排序"
                prop="sort">
                <el-input-number
                  :max="100000000"
                  :controls="false"
                  v-model="form.sort"
                  :disabled="formEdit"
                  placeholder="请输入排序"/>
              </el-form-item>
              <el-form-item v-if="formStatus == 'update'">
                <el-button
                  type="primary"
                  @click="update">更新
                </el-button>
                <el-button @click="onCancel">取消</el-button>
              </el-form-item>
              <el-form-item v-if="formStatus == 'create'">
                <el-button
                  type="primary"
                  @click="create">保存
                </el-button>
                <el-button @click="onCancel">取消</el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>
      </el-row>
    </basic-container>
  </div>
</template>

<script>
import { addObj, delObj, fetchTree, getObj, putObj } from '@/api/asset/assetcategory'
import { remote } from "@/api/admin/dict"
import { mapGetters } from 'vuex'

export default {
  name: 'Dept',
  data() {
    return {
      list: null,
      total: null,
      formEdit: true,
      formAdd: true,
      formStatus: '',
      typeOptions: ['0', '1'],
      methodOptions: ['GET', 'POST', 'PUT', 'DELETE'],
      listQuery: {
        name: undefined
      },
      optionszt: [],
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      rules: {
        parentId: [
          { required: true, message: '请输入父级节点', trigger: 'blur' }
        ],
        categoryId: [
          { required: true, message: '请输入节点编号', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入类别名称', trigger: 'blur' },
          { min: 1, max: 48, message: '长度在 1 到 48 个字符', trigger: 'blur'}
        ],
        timeLimit: [
          { required: true, message: '请输入使用期限(月)', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入编码', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '请选择状态', trigger: 'change' }
        ],
        sort: [
          { required: true, message: '请输入排序值', trigger: 'blur' }
        ]
      },
      labelPosition: 'right',
      form: {
        name: undefined,
        sort: undefined,
        parentId: undefined,
        categoryId: undefined,
        code: '',
        status: '1'
      },
      currentId: 0,
      deptManager_btn_add: false,
      deptManager_btn_edit: false,
      deptManager_btn_del: false
    }
  },
  created() {
    this.getList()
    remote('use_status').then(response => {
      this.optionszt = response.data.data
    })
    this.deptManager_btn_add = this.permissions['act_assetcategory_add']
    this.deptManager_btn_edit = this.permissions['act_assetcategory_edit']
    this.deptManager_btn_del = this.permissions['act_assetcategory_del']
  },
  computed: {
    ...mapGetters([
      'elements',
      'permissions'
    ])
  },
  methods: {
    getList() {
      fetchTree(this.listQuery).then(response => {
        this.treeData = response.data.data
      })
    },
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    getNodeData(data) {
      if (!this.formEdit) {
        this.formStatus = 'update'
      }
      getObj(data.id).then(response => {
        this.form = response.data.data
      })
      this.currentId = data.id
    },
    handlerEdit() {
      if (this.form.categoryId) {
        this.formEdit = false
        this.formStatus = 'update'
      }
    },
    handlerAdd() {
      this.resetForm()
      this.formEdit = false
      this.formStatus = 'create'
    },
    handleDelete() {
      if (this.form.categoryId) {
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delObj(this.currentId).then(() => {
            this.getList()
            this.resetForm()
            this.onCancel()
            this.$notify.success('删除成功')
          })
        })
      } else {
        this.$message.error('请先选择分类')
      }
    },
    update() {
      this.$refs.form.validate((valid) => {
        if (!valid) return
        putObj(this.form).then(() => {
          this.getList()
          this.onCancel()
          this.$notify.success('更新成功')
        })
      })
    },
    create() {
      this.$refs.form.validate((valid) => {
        if (!valid) return
        addObj(this.form).then(() => {
          this.getList()
          this.onCancel()
          this.$notify.success('创建成功')
        })
      })
    },
    onCancel() {
      this.formEdit = true
      this.formStatus = ''
    },
    resetForm() {
      this.form = {
        parentId: this.currentId
      }
    }
  }
}
</script>
<style lang="scss">
.category-wrapper{
  .el-input-number {
    width: 100%;
    .el-input__inner{
      text-align: left;
    }
  }
}
</style>

